<template>
    <el-row :gutter="10">
        <el-col v-for="(i, index) in data" :key="i" style="margin-top: 5%;" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">

            <el-card :body-style="{ padding: '0px' }" class="item">
                <a href="https://baidu.com" target="blank">
                    <img :src="i['mocCourseCard']['mocCourseCardDto']['imgUrl']"
                        class="image" />
                    <div style="padding: 14px">
                        <!-- 视频名 -->
                        <span>{{ i['mocCourseCard']['mocCourseCardDto']['name'] }}</span>
                        <div class="bottom">
                            <time class="time">{{ currentDate }}</time>
                            <el-button type="text" class="button">我想学</el-button>
                        </div>
                    </div>
                </a>
            </el-card>

        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { apiGetItems } from '@/api/index';
// 卡片信息的对象格式
interface detail {

}
const currentDate = ref(new Date())
// 搜索的数据
const data = ref([])

// 初始化
onMounted(() => {
    apiGetItems().then(res => {
        data.value = res.data;
        console.log(data.value)
    })
}) 
</script>

<style>
a {
    text-decoration: none;
}
.item:hover {
    border: #409EFF;
}
.time {
    font-size: 12px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    align-items: center;
    width: 100%;
    display: block;
}
</style>